<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/all.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/all.js"></script>
    <title>Database Compare</title>
</head>
<body>
<div class="index-container">
    <div class="index-col text-center">
        <div class="index-box text-left">
            <div class="row">
                <div class="col-md-5">
                    <div class="index-item">
                        <div class="index-label">连接一</div>
                        <select id="left-driver" class="form-control">
                            <option value="mysql">MySQL</option>
                            <option value="dm">达梦</option>
                        </select>
                        <input id="left-host" type="text" class="form-control" placeholder="IP地址" maxlength="15">
                        <input id="left-port" type="number" class="form-control" placeholder="连接端口" min="0" max="65535">
                        <input id="left-user" type="text" class="form-control" placeholder="用户名">
                        <input id="left-pass" type="password" class="form-control" placeholder="密码">
                        <select id="left-database" class="form-control hide"></select>
                        <button id="left-test" class="btn btn-primary show" style="width: 100%">测试连接</button>
                    </div>
                </div>
                <div class="col-md-2">
                    <button id="middle-vs" class="btn btn-danger index-vs">VS</button>
                    <a id="middle-setting" class="btn btn-primary index-setting" href="/setting.html">个性化设置</a>
                </div>
                <div class="col-md-5">
                    <div class="index-item">
                        <div class="index-label">连接二</div>
                        <select id="right-driver" class="form-control">
                            <option value="mysql">MySQL</option>
                            <option value="dm">达梦</option>
                        </select>
                        <input id="right-host" type="text" class="form-control" placeholder="IP地址" maxlength="15">
                        <input id="right-port" type="number" class="form-control" placeholder="连接端口" min="0" max="65535">
                        <input id="right-user" type="text" class="form-control" placeholder="用户名">
                        <input id="right-pass" type="password" class="form-control" placeholder="密码">
                        <select id="right-database" class="form-control hide"></select>
                        <button id="right-test" class="btn btn-primary show" style="width: 100%">测试连接</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $.ajax({url: "/ping", type: "POST", async: false});

    function s4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }

    function uuid() {
        return (s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4());
    }

    function exec(lr) {
        if (localStorage.getItem("database." + lr + ".driver")) $("#" + lr + "-driver").val(localStorage.getItem("database." + lr + ".driver"));
        if (localStorage.getItem("database." + lr + ".host")) $("#" + lr + "-host").val(localStorage.getItem("database." + lr + ".host"));
        if (localStorage.getItem("database." + lr + ".port")) $("#" + lr + "-port").val(localStorage.getItem("database." + lr + ".port"));
        if (localStorage.getItem("database." + lr + ".user")) $("#" + lr + "-user").val(localStorage.getItem("database." + lr + ".user"));
        if (localStorage.getItem("database." + lr + ".pass")) $("#" + lr + "-pass").val(localStorage.getItem("database." + lr + ".pass"));

        $("#" + lr + "-database").change(function () {
            localStorage.setItem("database." + lr + ".database", $("#" + lr + "-database").val());
        });

        var guid = uuid();
        $("#" + lr + "-test").click(function () {
            $.ajax({
                url: "/connect/" + guid,
                type: "POST",
                data: {
                    driver: $("#" + lr + "-driver").val(),
                    host: $("#" + lr + "-host").val(),
                    port: $("#" + lr + "-port").val()
                },
                beforeSend: function (xhr) {
                    $("#" + lr + "-test").attr("disabled", "disabled").html("正在连接，请稍后...");
                    xhr.setRequestHeader("username", $("#" + lr + "-user").val());
                    xhr.setRequestHeader("password", $("#" + lr + "-pass").val());
                    localStorage.setItem("database." + lr + ".driver", $("#" + lr + "-driver").val());
                    localStorage.setItem("database." + lr + ".provider", $("#" + lr + "-driver option:selected").text());
                    localStorage.setItem("database." + lr + ".host", $("#" + lr + "-host").val());
                    localStorage.setItem("database." + lr + ".port", $("#" + lr + "-port").val());
                    localStorage.setItem("database." + lr + ".user", $("#" + lr + "-user").val());
                    localStorage.setItem("database." + lr + ".pass", $("#" + lr + "-pass").val());
                },
                complete: function (xhr, ts) {
                    $("#" + lr + "-test").removeAttr("disabled");
                },
                error: function (xhr, msg, error) {
                    $("#" + lr + "-test").removeClass("btn-info").removeClass("btn-success").addClass("btn-danger").html("连接失败，请重试");
                },
                success: function (result, status, xhr) {
                    $("#" + lr + "-test").removeClass("btn-primary").removeClass("btn-danger").addClass("btn-success").html("连接成功！请选择数据库");
                    console.log("database." + lr + ".uuid=" + guid);
                    localStorage.setItem("database." + lr + ".uuid", guid);
                    $("#" + lr + "-database").html("");
                    for (var i = 0; i < result.length; i++) {
                        $("#" + lr + "-database").append("<option>" + result[i] + "</option>");
                    }
                    $("#" + lr + "-database").change();
                    setTimeout(function () {
                        $("#" + lr + "-test").removeClass("show").addClass("hide");
                        $("#" + lr + "-database").removeClass("hide").addClass("show");
                    }, 1000);
                }
            });
        });
    }

    exec("left");
    exec("right");

    $("#middle-vs").click(function () {
        window.location.href = "/main.html";
    });

</script>

</body>
</html>